<template>
  <div class="updimg-box">
    <div class="updateImg-box">
      <div class="update-box">
        <div class="xiugaiss">
          <div class="update-names">修改昵称</div>
          <el-input
            placeholder="请输入你的新昵称"
            v-model="input"
            @input="chang"
            clearable
          >
          </el-input>
          <div class="updateSure">
            <el-button size="small" type="success" @click="updateOut">{{
              text
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updatedName } from "../../network/userUpdate";
export default {
  name: "UpdateName",
  data() {
    return {
      updateName1: "",
      updateOuts: "",
      input: "",
      text: "退出",
    };
  },

  methods: {
    chang() {
      if (this.input != "") {
        this.text = "修改";
      } else {
        this.text = "退出";
      }
    },
    updateOut() {
      if (this.input == "") {
        this.updateOuts = false;
        this.$emit("childByNameOut", this.updateOuts);
      } else {
        updatedName(this.$Cookie.get("userid"), this.input).then((res) => {
          if (res.data.code == 200) {
            this.$alert("修改成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.$store.commit("changState");
                this.updateOuts = false;
                this.$emit("childByNameOut", this.updateOuts);
              },
            });
          } else {
            this.$alert("修改失败", "提示", {
              confirmButtonText: "确定",
            });
          }
        });
      }
    },
  },
};
</script>

<style>
.update-names {
  font-size: 0.15rem;
}
.xiugaiss input {
  width: 2rem;
  margin-bottom: 0.4rem;
  margin-top: 0.35rem;
}
</style>